<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:s="http://jboss.com/products/seam/taglib" xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j">
    <f:view contentType="text/html">
        <head>
            <meta charset="UTF-8"/>


            <title>Mediaplayer</title>
            <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

        </head>
        <body>
        <h:panelGrid columns="1" width="100%">
            <rich:dataTable value="#{musiclist.mediaPlayer.playlist.list}" var="filelist" >
                <f:facet name="caption">
                    <h:outputText value="Playlist (add name)"/>
                </f:facet>
                <rich:column style="#{rowIndex == 0}">
                    <f:facet name="header">Artist</f:facet>
                    <h:outputLabel value="#{filelist.artist}"/>
                </rich:column>
                <rich:column>
                    <f:facet name="header">Title</f:facet>
                    <h:outputLabel value="#{filelist.title}"/>
                </rich:column>
            </rich:dataTable>
            <a4j:form>
                <a4j:commandLink action="#{musiclist.mediaPlayer.playPlaylist()}"><h:graphicImage
                        url="/resources/play.jpg"/> </a4j:commandLink>
                <!--<a4j:commandButton action="#{musiclist.mediaPlayer.playPlaylist()}" value="Afspil"/>-->

                <a4j:commandLink action="#{musiclist.mediaPlayer.previous()}" ><h:graphicImage
                        url="/resources/previous.jpg"/></a4j:commandLink>
                <a4j:commandLink action="#{musiclist.mediaPlayer.next()}"><h:graphicImage
                        url="/resources/previous.jpg"/></a4j:commandLink>
                <a4j:commandLink action="#{musiclist.mediaPlayer.stop()}"><h:graphicImage
                        url="/resources/previous.jpg"/></a4j:commandLink>
                <a4j:commandButton action="#{musiclist.mediaPlayer.shuffle()}" value="Shuffle"/>
            </a4j:form>
        </h:panelGrid>


        <!---->
        <!--<div>-->
        <!--<div class="toolbar">-->
        <!--<h1 id="pageTitle">MediaPlayer</h1>-->
        <!--</div>-->
        <!--<ul class="rounded">-->
        <!--<ui:repeat value="#{playlist.list}" var="track">-->
        <!--<li class="arrow">#{track.artist} #{track.title} #{track.playingTime}</li>-->
        <!--</ui:repeat>-->
        <!--</ul>-->
        <!--</div>-->
        </body>
    </f:view>
</ui:composition>